<template>
  <div>
    <n-bar></n-bar>
    <!-- 地址部分 -->
    <div class="orone">
      <div class="ortwo">
        <div v-if="$route.query.id" class="addorde">
          <p>姓名:{{ addorder.username }}</p>
          <p>手机号:{{ addorder.userphone }}</p>
          <van-tag round type="primary">{{ addorder.label }}</van-tag>
          <van-tag round type="danger">{{
            addorder.status ? "默认" : ""
          }}</van-tag>
          <p>地址: {{ addorder.location + addorder.useraddress }}</p>
        </div>
        <div v-else>
          <van-button @click="toaddress" color="#7232dd" plain
            >点击添加地址</van-button
          >
        </div>
      </div>
      <div class="orthree"></div>
    </div>
    <!-- 列表渲染 -->
    <div>
      <div>
        <div class="list">
          <p class="orlist">
            <van-icon size="20" color="red" name="cart-circle-o" />
            <span>品牌精细</span>
          </p>
          <p class="orlists">
            <span>已免运费</span>
            <input type="button" />
            <a href="javascript:;">领劵</a>
          </p>
        </div>
        <div>
          <van-card
            v-for="item in str"
            :key="item.id"
            :num="item.num"
            :price="item.price"
            :title="item.goodsname"
            :thumb="item.img"
          />
        </div>
        <div class="oderp">
          <p>
            <span class="oderps">发票类型</span>
            <span>不开发票></span>
          </p>
          <p>
            <span class="oderps">售后免邮</span>
            <span>部分商家赠送</span>
          </p>
          <p>
            <span class="oderps">买家留言</span>
            <span> 填写内容需要与商家协商并确认，45字以内</span>
          </p>
        </div>
        <div>
          <van-submit-bar
            :price="allPrice"
            button-text="确认订单"
            @submit="onSubmit"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Addresslist } from "../request/app";
export default {
  data() {
    return {
      str: [],
      addorder: {},
    };
  },

  computed: {
    // 封装一个合计金额
    allPrice() {
      let sum = 0;
      this.str.map((item) => {
        if (item.checked) {
          sum += item.price * item.num;
        }
      });
      return sum * 100;
    },
  },
  mounted() {
    let str = JSON.parse(sessionStorage.getItem("arr"));
    console.log(str);
    this.str = str;

    //  单条查询
    //  判断如果地址栏有id在查询接口
    if (this.$route.query.id) {
      Addresslist({
        id: this.$route.query.id,
        uid: sessionStorage.getItem("userinfo")
          ? JSON.parse(sessionStorage.getItem("userinfo")).uid
          : null,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res, "地址响应");
          this.addorder = res.list[0];
        }
      });
    }
  },
  methods: {
    toaddress() {
      //    添加到地址管理
      this.$router.push("/address");
    },
    //  点击确认订单跳转支付页面
    onSubmit() {
      this.$router.push('/payment')
    },
  },
};
</script>

<style lang='less' scoped>
.addorde {
  line-height: 0.2rem;
  text-align: initial;
  margin-left: 0.2rem;
}
.oderar {
  width: 103%;
}
.oderp {
  padding: 0.1rem;
  p {
    height: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .oderps {
    font-size: 0.12rem;
    color: black;
    font-weight: bold;
  }
}
.orone {
  width: 100%;
  height: 1.2rem;
  background-color: tomato;
  display: flex;
  justify-content: center;
  border: none;
  align-items: center;
  position: relative;
  .ortwo {
    width: 3rem;
    height: 0.9rem;
    background-color: white;
    box-shadow: 0 0.05rem 0.1rem 0 rgb(255 149 128 / 10%);
    text-align: center;
    line-height: 0.9rem;
    border-radius: 0.04rem;
    z-index: 1;
  }
  .orthree {
    width: 100%;
    height: 0.3rem;
    position: absolute;
    bottom: 0;
    background-color: whitesmoke;
  }
}
.list {
  width: 100%;
  height: 0.56rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .orlist {
    font-size: 0.16rem;
    font-weight: bold;
    margin-left: 0.1rem;
    letter-spacing: 0.04rem;
  }
  .orlists {
    margin-right: 0.1rem;
    display: flex;
    letter-spacing: 0.04rem;
  }
}
</style>
